<template>
  <div>
    <div class="addcard">
      <ul>
        <li>
          <div class="names">持卡人</div>
          <div class="desc">{{mcard.cardholder}}</div>
        </li>

        <li>
          <div class="names">银行卡号</div>
          <div class="desc"><input type="text" v-model.trim="mcard.bankAccount" placeholder="请输入银行卡号" class="cardbox"/> </div>
        </li>
        <li>
          <div class="names">开户行</div>
          <div class="desc"><input type="text" v-model.trim="mcard.bankALLName" placeholder="请输入银行卡开户行" class="cardbox"/> </div>
        </li>
        <li>
          <div class="names">手机号码</div>
          <div class="desc"><input type="text"  v-model.trim="mcard.phone" placeholder="请输入手机号" class="cardbox"/></div>
        </li>
        <li>
          <div class="names">验证码</div>
          <div class="desc"><input type="text"  v-model.trim="mcard.smsCode" placeholder="请输入验证码" class="cardbox"/> <div class="descyzm">
            <div class="yzms"  @click="getcode">{{timerText}}</div>
          </div></div>

        </li>
      </ul>
    </div>
    <div class="scarbtn" @click="saveMcard()">保存</div>
  </div>
</template>

<script>
  export default {
    name: "add-bank-card",
    data(){
      return{
        mcard:{
          "bankAccount": "",
          "bankALLName": "",
          "cardholder": "",
          "defaulted": true,
          "openBank": "",//开户行
          "phone": "",
          "smsCode": "",
        },
        timer: 60,
        timerText: '获取验证码',
        codeSending: true,
      }
    },
    created(){
      this.getmineInfo()
    },
    methods:{
      /**
       * 发送验证码
       * @returns {boolean}
       */
      getcode () {
        if (!this.$options.filters.isphone(this.mcard.phone)) {
          this.$toast('请输入正确的手机号',2000)
          return false
        }
        if (!this.codeSending) {
          console.log('请勿重复')
          return false
        }
        this.codeSending = false
        this.$http.post('yxc/wxuser/sendCode', {},{params:{
            phoneNumber: this.mcard.phone
          }

        }).then(info => {
          console.log(info)
        if (info.code == 200) {
          this.timerText = this.timer + 'S'
          let t = setInterval(() => {
            if (this.timer === 0) {
            this.timerText = '获取验证码'
            this.codeSending = true
            this.timer = 60
            clearInterval(t)
          } else {
            this.timer--
            this.timerText = this.timer + 'S'
          }
        }, 1000)
        } else {
          this.codeSending = true
          this.$toast(info.message)
        }
      }, error => {
          this.codeSending = true
          this.$toast('短信验证码发送失败，请重试')
        })
      },
      saveMcard(){
        if(!this.mcard.bankAccount){
          this.$toast('请输入银行卡号')
          return false
        }
        if(!this.mcard.phone){
          this.$toast('请输入手机号')
          return false
        }
        if(!this.mcard.smsCode){
          this.$toast('请输入验证码')
          return false
        }

        this.$http.post('yxc/wxuser/bank/save',this.mcard).then(res=>{
          if(res.code == 200){
          this.$iconToast({
            message:'添加银行卡成功',
            type:'suc'
          },()=>{
            this.$router.replace({
              path:'/center',
              query:{
                funCode:'bankCard'
              }
            })
          })

        }else{

          this.$iconToast({
            message:res.message,
            type:'error'
          })


        }

        })
      },
      getmineInfo(){
        this.$http.get('yxc/wxuser/get').then(res=>{
          if(res.code == 200){
          this.minfo = res.data
          this.mcard.cardholder = res.data.realName;
        }else{
          this.$toast(res.message);
        }
      })
      },
    }
  }
</script>

<style lang="scss" scoped>

  .cardbox{
    outline: none;
    border:none;
  }
  .scarbtn{
    height:44px;
    text-align: center;
    background:rgba(28,103,255,1);
    border-radius:5px;
    position:fixed;
    left:40px;right:40px;
    bottom:40px;
    color:#FFF;
    font-size:15px;
    line-height: 44px;
  }

  .addcard{
    margin:15px; border-radius:5px;
    background: #FFF;
    min-height: 200px;
    padding:5px;
    font-size:14px;
    flex-wrap: nowrap;
    ul{
      li{
        display: flex;
        padding:8px 5px;
        border-bottom: 1px solid rgba(245,245,245,1);
        line-height: 32px;
        position: relative;
        .names{
          width:90px;
        }
        .desc{
           width:100%;
          input[type=text]{
            width:100%;
            outline: none;
            font-size:14px;
          }

          .descyzm{
            width:100px;
            position: absolute;right: 10px;top:10px;
            .yzms{
              border:1px solid rgba(255,150,0,1);
              border-radius:5px;
              line-height: 32px;
              text-align: center;
              color:rgba(255,150,0,1);
              font-size:14px;
            }
          }
        }

      }
      li:last-child{
        border:none;
      }
    }


  }
</style>
